
// 参考手册
// https://www.cnblogs.com/fengyuqing/p/5332112.html

const gulp = require('gulp');
const clean = require('gulp-clean');
// js需要的依赖
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// css需要的依赖
const postcss = require('gulp-postcss');  
const autoprefixer = require('autoprefixer');
const cssmin = require('gulp-cssmin');
// html需要的依赖
const htmlmin = require('gulp-htmlmin');

// 输出目录
const outDir = 'dist';


// 清空输出目录
gulp.task('clean', function () {
  return gulp.src(outDir+'', {read: false, allowEmpty: true}).pipe(clean());
})

// 定义一个名为scripts的任务，用于处理JavaScript文件  
gulp.task('scripts', function() {  
  return gulp.src('src/**/*.js') // 匹配src文件夹下的所有js文件  
    .pipe(babel({  
      presets: ['@babel/preset-env'] // 使用@babel/preset-env预设来转换代码  
    }))
    .pipe( uglify() ) // 将ES5语法的js程序 打包压缩
    .pipe(gulp.dest(outDir)); // 输出到dist文件夹  
});

// 定义一个名为styles的任务，用于处理CSS文件  
gulp.task('styles', function() {  
  const plugins = [  
    autoprefixer() // 使用autoprefixer来添加浏览器前缀  
  ];
  return gulp.src('src/**/*.css') // 匹配src文件夹下的所有css文件  
    .pipe(postcss(plugins)) // 应用PostCSS插件
    .pipe( cssmin() ) // 压缩css
    .pipe(gulp.dest(outDir)); // 输出到dist文件夹  
});

// 定义一个名为html的任务，用于处理html文件  
gulp.task('html', function() {
  return gulp.src('src/**/*.html')
    .pipe( htmlmin({ // 以 对象的形式 设定 html打包压缩参数
      // removeAttributeQuotes:true, // 删除属性中的双引号
      removeComments:true, // 删除注释
      // removeEmptyAttributes:true, // 删除空属性
      // removeEmptyElements:true, // 删除空标签 ---- 这个一定不要用
      // removeScriptTypeAttributes:true, // 删除 script标签的 type属性
      // removeStyleLinkTypeAttributes:true, // 删除 link标签的的 type属性
      // collapseBooleanAttributes:true, // 删除布尔属性的属性值
      collapseWhitespace:true, // 删除标签之间的空格
      minifyJS:true, // 压缩内容js程序
      minifyCSS:true, // 压缩内部css程序
    }))
    .pipe(gulp.dest(outDir)); // 输出到dist文件夹
})

// 打包js/css/html
gulp.task('build', gulp.series('scripts', 'styles', 'html'))

// 定义处理其它文件的任务
gulp.task('else', function() {
  return gulp.src('src/**/*.!(js|css|html)')
    .pipe(gulp.dest(outDir)); // 输出到dist文件夹
})

// 监视文件的变化，当文件有更新时执行build任务
// CMD执行命令：gulp watch
gulp.task('watch', function () {
  gulp.watch(['src/**/*.+(js|css|html)'], gulp.series('build'));
});
  
// 定义默认任务 
// CMD执行命令：gulp 
gulp.task('default', gulp.series('clean', 'build', 'else'));


